<template>
    <div id="travel-manage">
        <Title :title="title"/>
        <div id="travels">
            <h2 class="travel_tji">出行统计</h2>
            <table class="travel_table">
                <tr>
                    <td>正在研学</td>
                    <td>当前出行人数</td>
                    <td>异常提醒</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>340</td>
                    <td>0</td>
                </tr>
            </table>
        </div>
        <div id="travels2">
            <p class="travel_tailAfter">出行状态跟踪</p>
            <div class="travel_studies">
                <el-container>
                    <el-aside width="250px">
                        <el-radio class="travel_studiesRadio" v-model="radio" label="1">显示全部正在研学出行</el-radio>
                        <el-radio class="travel_studiesRadio" v-model="radio" label="2">郑州市第八中学云台山研学旅行</el-radio>
                        <el-radio class="travel_studiesRadio" v-model="radio" label="3">郑州市第八中学红旗渠研学旅行</el-radio>
                        <el-radio class="travel_studiesRadio" v-model="radio" label="4">郑州市第八中学绿博园研学旅行</el-radio>
                        <el-radio class="travel_studiesRadio" v-model="radio" label="5">郑州市第八中学博物院研学旅行</el-radio>
                    </el-aside>
                </el-container>
            </div>
            <div class="travel_baidu">
                <baidu-map class="travel_baiduMap" :center="center" :zoom="zoom" @ready="handler"
                           :scroll-wheel-zoom='true'>
                </baidu-map>
            </div>
        </div>
    </div>
</template>

<script>
    import Title from "../../../../components/title/Title";
    import {Aside, Container, Radio} from "element-ui";

    export default {
        name: "TravelManage",
        components: {
            Title,
            "el-aside":Aside,
            "el-container":Container,
            "el-radio":Radio
        },
        data(){
            return{
                title:'出行管理',
                radio:'',
                center: {lng: 109.45744048529967, lat: 36.49771311230842},
                zoom: 13
            }
        },
        methods:{
            handler ({BMap, map}) {
                console.log(BMap, map)
                this.center.lng = 116.404
                this.center.lat = 39.915
                this.zoom = 15
            }
        }
    }
</script>

<style scoped>
    bm-view {
        width: 100%;
        height: 300px;
    }

    #travels{
        border: 1px solid #c2d4d6;
        width: 80%;
    }

    .travel_tji{
        border: 1px solid #c2d4d6;
        padding: 1% 1%;
        width: 100%;
    }

    .travel_table{
        margin: 1% 0% 1% 0%;
        width: 70%;
    }

    .travel_table tr td{
        text-align: center;
        padding: 2% 0% 2% 0%;
    }

    .travel_tailAfter{
        margin: 2% 3% 4% 3%;
        width: 25%;
    }

    .travel_studies{
        margin: 2% 3%;
        width: 25%;
        float: left;
    }

    .travel_studies .travel_studiesRadio{
        padding: 3% 0%;
    }

    .travel_baidu{
        border: 1px solid red;
        width: 47%;
        float: left;
        position: relative;
        bottom: 90px;
        left: 23px;
    }

    .travel_baiduMap{
        height: 600px;

    }
</style>
